<template>
  <el-tree-select
    v-model="classId"
    :data="classOptions"
    :placeholder="$props.placeholder"
    node-key="id"
    value-key="id"
    :props="{ value: 'id', label: 'label',disabled:'disabled', children: 'children' }"
    :render-after-expand="false"
    :style="style"
    @node-click="handleNodeClick"
    clearable
    filterable
    @clear="clear"
    check-strictly
    default-expand-all
  />
</template>

<script setup lang="ts">
import { classTree } from '@/api/office/class';
import { propTypes } from '@/utils/propTypes';
const classOptions = ref<any[]>([]);
const classId = ref<string>('');

const props = defineProps({
  gradeDisabled: propTypes.bool,
  modelValue: propTypes.string,
  placeholder: propTypes.string.def('请选择班级'),
  style: {
    type: Object,
    default: () => {
      return { width: '240px' };
    }
  }
  // width: propTypes.string.def("240") || propTypes.number.def(240)
});

watch(
  () => props.modelValue,
  async (val) => {
    if (val != classId.value) classId.value = val;
  },
  { deep: true, immediate: true }
);

const clear = () => {
  classId.value = '';
  emit('clear');
  emit('update:modelValue', undefined);
};

const emit = defineEmits(['node-click', 'clear', 'update:modelValue']);
const handleNodeClick = (data: any) => {
  if (props.gradeDisabled && data?.id?.startsWith('grade')) return;
  emit('update:modelValue', data?.id);
  emit('node-click', data);
};
const getList = async () => {
  const res = await classTree();
  if (props.gradeDisabled) {
    for (let data of res.data) {
      if (data?.id?.startsWith('grade')) data['disabled'] = true;
    }
  }
  classOptions.value = res.data;
  console.log(classOptions.value);
};

onMounted(() => {
  getList();
});

defineExpose({
  clear
});
</script>

<style scoped></style>
